<template>
  <div>
  <el-card class="box-card">
    <div slot="header" class="clearfix">
     <Breadcrumb>评论管理</Breadcrumb>
     <div>
         <el-table :data="tableData" style="width:100%" header-align="center"  v-loading="loading">
            <el-table-column prop="title" label="标题" ></el-table-column>
            <el-table-column prop="total_comment_count" label="总评论数" width="180"></el-table-column>
            <el-table-column prop="fans_comment_count" label="粉丝评论数" width="180"></el-table-column>
            <el-table-column  label="状态" width="180">
                <template slot-scope="scope">
                  <el-tag v-if="scope.row.comment_status" type="primary">开启</el-tag>
                  <el-tag v-else type="success">关闭</el-tag>
                </template>
            </el-table-column>
            <el-table-column align="center" label="操作" width="180">
              <template slot-scope="scope">
                <el-button :type="scope.row.comment_status ? 'danger ' : 'primary'"  size="small" @click="Hannuo(scope.$index, scope.row)">
                  {{scope.row.comment_status ? '关闭' : '打开'}}评论
                </el-button>
              </template>
            </el-table-column>
         </el-table>
     </div>
     <el-pagination
        style="margin-top:20px"
        @current-change="hArrtiao"
        background
        :page-size="20"
        layout="prev, pager, next"
        :total="total_count">
      </el-pagination>
    </div>
</el-card>
  </div>
</template>

<script>
export default {
  name: 'comments',
  data () {
    return {
      // 加载
      loading: false,
      // 总的列表
      tableData: [],
      page: 1,
      // 评论状态
      comment_status: '',
      total_count: 0
    }
  },
  created () {
    this.loagetf()
  },
  methods: {
    // 是否评论
    async Hannuo (index, row) {
      this.loading = true
      try {
        console.log(222)
        const res = await this.$http({
          method: 'PUT',
          url: '/mp/v1_0/comments/status?article_id=' + row.id.toString(),
          data: {
            allow_comment: !row.comment_status
          }
        })
        console.log('鸟啊', res)
        row.comment_status = !row.comment_status
        this.$message.success('修改成功！')
        this.loading = false
      } catch (err) {
        this.$message.error('修改失败！！！')
        this.loading = false
      }
    },
    // 页面跳转
    hArrtiao (odj) {
    // 跳转
      this.page = odj
      // 重新的调用
      this.loagetf()
    },
    async loagetf () {
      const res = await this.$http({
        method: 'GET',
        url: '/mp/v1_0/articles',
        params: {
          page: this.page,
          response_type: 'comment'
        }
      })
      this.tableData = res.data.data.results
      // 求出总的条数
      this.total_count = res.data.data.total_count
    }
  }

}
</script>

<style lang="less" scoped>

</style>
